@sidebar-background-color: #474a4d;

.container {
  flex-wrap: wrap;

  main {
    margin: 0 5px;

    .toc-btn {
      right: 20px;
    }

    .footprint {
      .list {
        .info {
          .body {
            .image {
              max-width: 100%;
              max-height: 100%;
            }
          }
        }
      }
    }
  }

  .sidebar {
    @sidebar-height: auto;
    @sidebar-min-height: 120px;
    @sidebar-width: 100%;
    min-height: @sidebar-min-height;
    position: relative;
    z-index: 999;

    .sidebar-main {
      position: fixed;
      min-width: @sidebar-width;
      min-height: @sidebar-height;
      border: 0;
      box-shadow: 0px 0px 5px 0px @sidebar-background-color;
      background-color: @sidebar-background-color;
    }

    .user-info {
      .avatar {
        width: 60px;
        height: 60px;
        margin: 15px auto;
      }
    }

    .menu-btn {
      display: block;
    }

    .menu {
      margin: 0;

      .basic-line {
        margin-bottom: -10px;
        margin-top: 10px;
      }
    }
  }

  .github-svg {
    fill: #dcdddd;
    color: @sidebar-background-color;
  }

  .recommend {
    .reason {
      text-align: center;
      font-size: 15px;
      margin-bottom: 8px;
    }
  }
}